<template>
  <div class="app-container">
    <el-row type="flex" align="center" :gutter="20">

    </el-row>
    <el-row style="margin-top: 20px">
      <el-table :stripe="true" :border="true" :data="tableData">
        <el-table-column align="center" width="50px" prop="id" label="ID" />
        <el-table-column align="center" min-width="100px" prop="realName" label="姓名" />
        <el-table-column align="center" min-width="100px" prop="mobile" label="手机号" />
        <el-table-column align="center" min-width="120px" label="是否脱贫劳动力">
          <template slot-scope="{row}">
            <el-tag v-if="row.isRid == 0">否</el-tag>
            <el-tag v-if="row.isRid == 1" type="success">是</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="110px" prop="crtTime" label="报名时间" />
        <el-table-column align="center" min-width="100px" label="审核状态">
          <template slot-scope="{row}">
            <template v-if="row.status == 0">
              <span>待审核</span>
            </template>
            <template v-if="row.status == 1">
              <span>已通过</span>
            </template>
            <el-tooltip class="item" effect="dark" :content="row.remark" placement="right-start">
              <template v-if="row.status == 2">
              <span>未通过</span>
              </template>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" width="260px" label="操作">
          <template slot-scope="{row}">
            <el-button size="mini" icon="el-icon-check" type="primary" v-if="row.status === 0"
              @click="updateRowState(row.id, 1,row.remark)">通过
            </el-button>
            <el-button size="mini" icon="el-icon-close" type="warning" v-if="row.status === 0"
              @click="openDetail(row.id, 1)">拒绝
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-dialog :append-to-body="true" width="50%"  v-if="visible[1]" :visible.sync="visible[1]" title="拒绝理由" :close-on-click-modal="false"
               :close-on-press-escape="false" :destroy-on-close="true"
    >
      <ReviewDetails ref="detail" :id="detailId" :closeDialog="closeDialog"  ></ReviewDetails>
      <span slot="footer" class="dialog-footer">
        <el-button plain type="primary" @click="visible[1] = false">取 消</el-button>
        <el-button type="primary" class="primary" @click="$refs.detail.submit()">确 定</el-button>
      </span>
    </el-dialog>
    <el-row style="margin-top: 20px">
      <el-pagination :page-sizes="tableConf.sizes" :page-size="tableConf.size" :total="tableConf.total"
        :current-page="tableConf.page" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-row>
    

  </div>
</template>

<script>


import {

  ReviewEnrollmentCourses,
  getTrainCustomerListApi,
} from '@/api/trainCode'
import ReviewDetails from '@/components/TrainCode/ReviewDetails.vue'

export default {
  name: 'application',
  components: { ReviewDetails },
  data() {
    return {
      visible: {//控制弹窗显示
        0: false,
        1: false
      },
      tableData: [],
      tableConf: {
        page: 1,
        sizes: [10, 20, 50, 100],
        total: 0,
        size: 10,
        loading: false
      },
      detailId: null,
      keyword: '',//关键字查询
      filterData: {
        keyword: '',
        state: [],
        time: []
      },
      placeTypeLoading: true,
      trainTypeOption: []
    }
  },
  mounted() {
    if (this.id) {
      this.getTableList()

    }

  },
  props: ['id', 'closeDialog'],
  methods: {
    // 每页显示数量change
    handleSizeChange(e) {
      this.tableConf.size = e
      this.getTableList()
    },
    // 当前页change
    handleCurrentChange(e) {
      this.tableConf.page = e
      this.getTableList()
    },
    downloadCode(url) {
      window.open(url)
    },
    //打开添加/编辑页
    openDetail(id,index) {
      this.detailId = id
      this.visible[index] = true
    },
    closeDialog(index) {
      this.visible[index] = false
      this.getTableList()
    },
    //通过理由
    updateRowState(id, status, remark) {
      ReviewEnrollmentCourses({ id, status, remark }).then(() => {
        this.$message.success('已审核')
      }).finally(() => {
        this.getTableList()
      })
    },
   
    //获取列表
    getTableList() {
      this.tableConf.loading = true
      getTrainCustomerListApi({ page: this.tableConf.page, limit: this.tableConf.size, sid: this.id }).then((res) => {
        this.tableData = res.list;
        this.tableConf.total = res.count;
      }).finally(() => {
        this.tableConf.loading = false
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.filterData-block {
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
